<template>
  <view class="settingPassword_container">
    <view class="tips">
      <text>此密码针对账户余额支付设置</text>
    </view>

    <view class="item">
      <text> 手机号 </text>
      <input v-model="phoneNum" placeholder="请输入原密码" class="code">
      <text @click="clickCode"> {{codeContent}} </text>
    </view>

    <view class="item">
      <text>验证码</text>
      <input v-model="code" placeholder="确认验证码">
    </view>

    <view class="item">
      <text>支付密码</text>
      <input v-model="password1" placeholder="请输入6位密码">
    </view>

    <view class="item">
      <text>确认支付密码</text>
      <input v-model="password2" placeholder="请输入6位密码">
    </view>

    <view class="item-confirm">
      <view class="confirm" @click="confirm"
        :style="phoneNum && code && password1 && password2 ? 'background:#0F70E1' : '' ">
        确定
      </view>
    </view>

  </view>
</template>

<script>
import { setPayPassword } from '@/api/setting/index.js'
import { getCode } from '@/api/login/wechat.js'
import jwtDecode from 'jwt-decode'

export default {
  data () {
    return {
      phoneNum: '',
      code: '',
      password1: '',
      password2: '',
      codeContent: '获取验证码',
      hasData: 60,
    }
  },
  onShow () {
    let a = JSON.parse(jwtDecode(uni.getStorageSync('token')).userContext.replace('\\', ''))
    this.phoneNum = a.username
  },
  methods: {
    confirm () {
      if (this.phoneNum) {
        uni.showToast({
          icon: 'none',
          title: '请输入手机号', mask: true
        })
        return
      }
      if (this.code) {
        uni.showToast({
          icon: 'none',
          title: '请输入验证码', mask: true
        })
        return
      }
      if (this.password1) {
        uni.showToast({
          icon: 'none',
          title: '请输入支付密码', mask: true
        })
        return
      }
      if (this.password2) {
        uni.showToast({
          icon: 'none',
          title: '请确认支付密码', mask: true
        })
        return
      }

      if (this.password1 === this.password2) {
        setPayPassword({ password: this.password2, mobile: this.phoneNum, code: this.code }).then((res) => {
          uni.showToast({
            icon: 'none',
            title: res.msg, mask: true
          })
        })
      } else {
        uni.showToast({
          icon: 'none',
          title: '两次输入的密码不一致', mask: true
        })
      }
    },
    clickCode () {
      getCode('WALLET_PASSWORD', this.phoneNum).then(res => {
        if (res.code === 200) {
          this.hasTimer()
        }
      })
    },
    // 定时器
    hasTimer () {
      this.codeContent = this.hasData + '秒后重新获取'
      setTimeout(() => {
        if (this.hasData > 1) {
          this.hasData--
          this.hasTimer()
        } else {
          this.codeContent = '获取验证码'
        }
      }, 1000)
    },
  }
}
</script>

<style lang="scss" scoped>
.settingPassword_container {
  background: #f9f9f9;
  height: 100vh;
}
.tips {
  background: #e4ebf9;
  padding: 16rpx 30rpx;
  margin-bottom: 20rpx;
  text {
    color: #000;
    font-size: 26rpx;
    opacity: 0.8;
  }
}

.item {
  background: #fff;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  padding: 40rpx 50rpx;
  border-bottom: 1px solid #f9f9f9;
  input {
    border: 0;
    font-size: 24rpx;
  }
  text {
    width: 30%;
    font-size: 26rpx;
  }
}

.item-confirm {
  padding-top: 50%;
  padding-bottom: 10%;
  .confirm {
    width: 70%;
    background: #c6c6c6;
    color: #fff;
    padding: 20rpx;
    border-radius: 100rpx;
    text-align: center;
    margin: 0 auto;
    font-size: 28rpx;
  }
}
</style>
